{% extends 'base/base.html' %}
{% block title %}
    充值
{% endblock %}

{% block main %}
    <div class="plan-hero">
        <h2>金额充值</h2>
        <div class="meta">为号码：{{ phone.phonenumber }}</div>
    </div>

    <div class="card border-0 shadow-sm" style="max-width:720px;margin:0 auto;">
        <div class="card-body">
            <form action="" method="post">
                {% csrf_token %}
                <div class="form-group">
                    {{ form }}
                </div>
                <div style="margin-top:10px;">
                    <div class="quick-amounts">
                        <button type="button" class="qa" data-amount="50">¥50</button>
                        <button type="button" class="qa" data-amount="100">¥100</button>
                        <button type="button" class="qa" data-amount="200">¥200</button>
                        <button type="button" class="qa" data-amount="500">¥500</button>
                    </div>
                </div>

                <div style="margin-top:12px;">
                    <div class="pay-methods">
                        <label class="pm"><input type="radio" name="pay_method_radio" value="alipay"> <span class="ico alipay"></span> 支付宝</label>
                        <label class="pm"><input type="radio" name="pay_method_radio" value="wechat"> <span class="ico wechat"></span> 微信</label>
                        <label class="pm"><input type="radio" name="pay_method_radio" value="bank"> <span class="ico bank"></span> 银行卡</label>
                        <label class="pm"><input type="radio" name="pay_method_radio" value="cash"> <span class="ico cash"></span> 现金</label>
                    </div>
                </div>

                <button class="btn btn成功 btn-lg" type="submit" style="width:100%;margin-top:14px;">立即缴费</button>
            </form>
        </div>
    </div>
    <script>
    (function(){
        // 快捷金额点击回填到金额输入框
        var amountInput = document.querySelector('input[name="amount"]');
        document.querySelectorAll('.qa').forEach(function(btn){
            btn.addEventListener('click', function(){
                var v = this.getAttribute('data-amount');
                if(amountInput){ amountInput.value = v; amountInput.focus(); }
            });
        });
        // 支付方式单选映射到下拉框
        var select = document.querySelector('select[name="pay_method"]');
        document.querySelectorAll('input[name="pay_method_radio"]').forEach(function(radio){
            radio.addEventListener('change', function(){
                if(select){ select.value = this.value; }
            });
        });
        // 初始化：若下拉已有值则同步到单选
        if(select){
            var current = select.value;
            var r = document.querySelector('input[name="pay_method_radio"][value="'+current+'"]');
            if(r){ r.checked = true; }
        }
    })();
    </script>
{% endblock %}